<template>
    <dl class="list">
        <dt @click="isShow = !isShow">
            <span class="tit">运营快捷入口</span>
        </dt>
        <el-collapse-transition>
            <dd class="zd" v-show="isShow" v-loading="loading">
                <div class="item" v-for="item,index in entryList" :key="index" @click="$router.push(item.path)">
                    <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
                    <p>
                        {{item.name}}
                    </p>
                </div>
            </dd>
        </el-collapse-transition>
    </dl>
</template>

<script>
export default {
    name: '',
    components: {

    },
    data() {
        return {
            loading: false,
            isShow: true,
            entryList: [
                { name: "添加商品", icon: "plus", path: "/goods/index" },
                { name: "订单列表", icon: "dd", path: "/order/goodsOrder" },
                { name: "用户管理", icon: "user-manage", path: "/senior/user" },
                { name: "交易统计", icon: "up-gray", path: "" },
                { name: "短信营销", icon: "sms", path: "" },
                { name: "广告管理", icon: "ad", path: "" },
                { name: "专题管理", icon: "xing", path: "" },
                { name: "秒杀管理", icon: "naozhong", path: "" },
                { name: "新品推荐", icon: "new", path: "" },
            ]
        }
    },
    created() {

    },
    methods: {

    },
}

</script>
<style scoped lang='scss'>
.list {
    width: 100%;
    overflow: hidden;

    .tit {
        display: block;
        padding: 20px 0;
        width: 100%;
        border: 1px solid rgb(228, 228, 228);
        background-color: rgb(243, 243, 243);
        padding-left: 20px;
        font-weight: 600;
        font-size: 16px;
    }

    .zd {
        width: 100%;
        background: #ffffff;
        border: 1px solid rgb(228, 228, 228);
        border-top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
            width: 12.5%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 20px 0 0;
            cursor: pointer;

            .card-panel-icon {
                font-size: 48px;
            }

            p {
                padding-top: 10px;
            }
        }

        .item:hover {
            background: #F9F9F9;

            p {
                color: #1ABC9C;
            }
        }
    }
}
</style>